<template>
    <div>
        <div v-if="items.length > 0">
            <div v-for="(item, index) in items" :key="index" class="item-container">
                <div class="list-item">
                    <div class="left-text title">{{ item.title }}</div>
                    <div class="right-text price">{{ item.price }}</div>
                </div>
                <div class="list-item">
                    <div  :class="['left-text', 'font-size', getStatusClass(item.status)]" >{{ item.status }}</div>
                    <div class="right-text font-size">{{ item.time }}</div>
                </div>
                <u-line></u-line>
            </div>
            <div v-if="loading" class="loading-text">加载中...</div>
            <div v-if="noMoreData" class="no-more-text">没有更多数据了</div>
        </div>
        <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
    </div>
</template>

<script>
import { getTakeList } from "@/api/apiService";

export default {
  data() {
    return {
      items: [],
      pagination: {
        page: 1,
        pageSize: 10
      },
      loading: false,
      noMoreData: false
    };
  },

  created() {
    this.fetchTakeList();
    window.addEventListener('scroll', this.handleScroll);
  },

  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },

  methods: {
    async fetchTakeList() {
      if (this.noMoreData || this.loading) return;

      this.loading = true;
      const params = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize
      };

      try {
        const response = await getTakeList(params);
        if (response.data.list.length === 0) {
          this.noMoreData = true;
        } else {
          this.items = [...this.items, ...response.data.list];
          this.pagination.page++;
        }
      } catch (error) {
        console.error('获取提现记录失败', error);
      } finally {
        this.loading = false;
      }
    },
    onScrollToLower() {
      this.fetchTakeList();
    },
    handleScroll() {
      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        this.onScrollToLower();
      }
    },
	getStatusClass(status) {
	  switch (status) {
	    case '提现成功':
	      return 'status-success';
	    case '提现失败':
	      return 'status-fail';
	    case '正在提现中':
	      return 'status-processing';
	    default:
	      return '';
	  }
	},
  }
};
</script>

<style scoped>
page {
    background-color: #F6F6F6;
}

.container {
    display: flex;
    justify-content: center;
    margin: 10px;
    height: 150px;
    background-image: url('/static/10.png');
    background-size: cover;
    position: relative;
}

.background-content {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: space-around;
    color: white;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: #ACBBFF;
    font-size: 12px;
    margin: 3px;
}
.status-success {
  color: #28a745;
}

.status-fail {
  color: #dc3545;
}

.status-processing {
  color: #FF9F26;
}
.bottom-left,
.top-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.rectangle {
    position: absolute;
    top: 30%;
    right: 0;
    height: 30px;
    padding: 0 20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #FF9F26;
    color: white;
    display: flex;
    align-items: center;
    transform: translate(0, -50%);
}

.item-container {
    padding: 10px 15px;
    background-color: white;
}

.list-item {
    display: flex;
    justify-content: space-between;
}

.font-size {
    font-size: 11px;
    
}

.price {
    font-size: 14px;
    color: #FF9F26;
    font-weight: bold;
}

.title {
    font-size: 13px;
}

.text-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    color: white;
    left: 30px;
    top: 10px;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.left-text {
    flex: 1;
    text-align: left;
}

.right-text {
    flex: 0 0 auto;
    text-align: right;
}

.loading-text,
.no-more-text {
    text-align: center;
    padding: 10px;
    color: #666;
}
</style>
